<template>
	<view class="events-details">
		<view class="events-list">
			<!-- 右上角标签 -->
			<view :class="allData.activityStatus==0?'tip':(allData.activityStatus==1?'tip2':'tip1')"><text>{{allData.activityStatus==0?"报名中":(allData.activityStatus==1?"进行中":"已结束")}}</text></view>
			<!-- 标题 -->
			<view class="title">
				<text>{{allData.title}}</text>
			</view>
			<!-- 时间 -->
			<view class="time">
				<text>{{allData.createTime}}</text>
			</view>
			<!-- 主要文字 -->
			<view class="text">
				<text>{{allData.detailed}}</text>
			</view>
			<!-- 图片 -->
			<view class="picture">
				<img style="width: 628rpx;height: 318rpx;"
					:src="allData.photo"
					alt="">
			</view>
			<!-- 主题 -->
			<view class="theme">
				<text>活动主题：</text>
			</view>
			<!-- 主题内容 -->
			<view class="theme-text">
				<text>{{allData.theme}}</text>
			</view>
			<!-- 报名费用 -->
			<view class="fee">
				<text>报名费用：<text class="fee-num">{{allData.registration}}元</text>/组</text>
			</view>
			<!-- 活动时间 -->
			<view class="theme">
				<text>活动时间：</text>
			</view>
			<!-- 活动具体时间 -->
			<view class="theme">
				<text>{{allData.timeRange}}</text>
			</view>
			<!-- 活动地点 -->
			<view class="theme">
				<text>{{allData.address}}</text>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="button-box" @click="toggle('center')">
			<view class="button">
				<text>查看报名信息</text>
			</view>
		</view>
	
		<!-- 查看报名信息弹框 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="register-info">
				<view class="ri-top">
					<view><text>我的报名信息</text></view>
					<view @click="close"><img style="width: 35rpx;height: 35rpx;" src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%B4%BB%E5%8A%A8%E8%AF%A6%E6%83%85-%E6%8A%A5%E5%90%8D%E4%B8%AD/clear_u1886.png" alt=""></view>
				</view>
				<view class="detail-info1">
					<view class="info-title"><text>孩子姓名</text></view>
					<view><text>{{searchData.childName}}</text></view>
				</view>
				<view class="detail-info1">
					<view class="info-title"><text>联系电话</text></view>
					<view><text>{{searchData.phone}}</text></view>
				</view>
				<view class="detail-info1">
					<view class="info-title"><text>孩子年龄</text></view>
					<view><text>{{searchData.childAge}}岁</text></view>
				</view>
				<view class="detail-info1">
					<view class="info-title"><text>报名费</text></view>
					<view><text style="font-weight: bold;">￥{{searchData.registration}}.00</text></view>
				</view>
				<view class="detail-info1">
					<view class="info-title"><text>支付方式</text></view>
					<view><text>{{searchData.payMode}}</text></view>
				</view>
				<view class="detail-info1">
					<view class="info-title"><text>支付时间</text></view>
					<view><text>{{searchData.payTime}}</text></view>
				</view>
				<!-- 提示 -->
				<view class="prompt">
					<text>如需取消活动或信息有误请联系客服</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app"
	import http from "../../utils/http.js"
	import {ref,onMounted,} from "vue"
	
	// 定义一个放数据的数组
	let allData=ref([]);
	// 定义一个放弹出框数据的数组
	// let getPopup=ref([]);
	// 定义查看报名信息数据
	let searchData=ref([]);
	// 定义页数条数总条数
	let id=ref();
	let page=ref(1);
	let limit=ref(10);
	// 渲染数据的接口
	const getData = () => {
	  http({
	    url: "/preSignUp/" + id.value,
		method: 'post'
	  }).then((res) => {
	    console.log(res.data);
	    if (res.code == 0) {
			allData.value = res.data;
	    }
		console.log('allData',allData.value);
	  });
	};
	
	// 点击查看报名信息的数据
	const getSearch = () => {
	  http({
	    url: "/seeMessage/" + id.value,
		params:{
			wechatName:'小瓶盖'
		}
	  }).then((res) => {
		  console.log(1);
	    console.log('66666',res);
	    if (res.code == 0) {
			searchData.value = res.data;
	    }
		console.log('searchData',searchData.value);
	  });
	};
	
	// 渲染弹出框内容的接口
	// const getPopup = () => {
	//   http({
	//     url: "/preSignUp/" + id.value,
	//   }).then((res) => {
	//     console.log(res.data);
	//     if (res.code == 0) {
	// 		getPopup.value = res.data;
	//     }
	// 	console.log('getPopup',getPopup.value);
	//   });
	// };
	// 页面加载传来的id
	onLoad((option)=>{
		// console.log(111111);
		id.value=option.id
		console.log(id.value);
	})
	// 挂载后
	onMounted(()=>{
		getData();
		getSearch();
		// console.log(22222);
		
	});
	//打开弹框
	const popup=ref();
	const type=ref();
	const toggle=(type)=> {
		type = type
		popup.value.open(type)
	};
	//关闭弹框
	const close=()=> {
		popup.value.close()
	}

</script>

<style lang="less" scoped>
	.events-details {
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.events-list {
		width: 676rpx;
		height: 1050rpx;
		box-shadow: 0 0 5px 3px #f0f0f0;
		border-radius: 10rpx;
		position: relative;
		text-align: center;

		// 右上角标签
		.tip {
			width: 124rpx;
			height: 40rpx;
			background-color: #efb336;
			color: white;
			font-weight: bold;
			text-align: center;
			font-size: 27rpx;
			border-top-right-radius: 10rpx;
			vertical-align: middle;
			position: absolute;
			top: 0;
			right: 0;
		}
		.tip1 {
			width: 124rpx;
			height: 40rpx;
			background-color: #999ea3;
			color: white;
			font-weight: bold;
			text-align: center;
			font-size: 27rpx;
			border-top-right-radius: 10rpx;
			vertical-align: middle;
			position: absolute;
			top:0 ;
			right: 0;
		}
		.tip2 {
			width: 124rpx;
			height: 40rpx;
			background-color: #5b80ff;
			color: white;
			font-weight: bold;
			text-align: center;
			font-size: 27rpx;
			border-top-right-radius: 10rpx;
			vertical-align: middle;
			position: absolute;
			top:0 ;
			right: 0;
		}

		// 标题样式
		.title {
			font-size: 34rpx;
			font-weight: bold;
			padding-top: 40rpx;
			width: 676rpx;
			text-align: center;
		}

		// 时间
		.time {
			width: 676rpx - 60rpx;
			text-align: right;
			padding: 10rpx 30rpx;
			font-size: 24rpx;
			color: #99a0a9;
		}

		// 主要文字
		.text {
			padding-right: 22rpx;
			padding-left: 22rpx;
			font-size: 24rpx;
			color: #99a0a9;
			line-height: 42rpx;
			text-indent: 44rpx;
			text-align: left;
		}

		// 图片
		.picture {
			width: 676rpx;
			text-align: center;
			padding-top: 15rpx;
		}

		// 主题
		.theme {
			color: #99a0a9;
			font-size: 24rpx;
			padding-top: 24rpx;
		}

		// 主题内容
		.theme-text {
			font-size: 24rpx;
			font-weight: bold;
			padding-top: 24rpx;
		}

		// 报名费用
		.fee {
			color: #99a0a9;
			font-size: 24rpx;
			padding-top: 24rpx;

			.fee-num {
				color: red;
				font-weight: bold;
			}
		}
	}

	//底部按钮
	.button-box {
		width: 750rpx;
		height: 110rpx;
		border-top: 1px solid #f3f4f4;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 0;

		.button {
			width: 672rpx;
			height: 80rpx;
			background-color: #2f78ff;
			border-radius: 10rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
		}
	}

	// 查看报名信息弹框
	.register-info {
		width: 606rpx;
		height: 686rpx;
		padding: 38rpx 44rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		
		.ri-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 518rpx;
			font-size: 35rpx;
			font-weight: bold;
		}
		.detail-info1 {
			width: 518rpx;
			height: 76rpx;
			border-bottom: 1px solid #f4f4f4;
			display: flex;
			align-items: center;
			
			.info-title {
				width: 236rpx;
				color: #a2a6a6;
			}
		}
		.prompt {
			color: #a2a6a6;
			font-size: 26rpx;
		}
	}
</style>
